<template>
  <div>
    <HeaderBar />
    <div v-if="!paymentSuccess" class="outer9">
      <div class="inter1">
        <h1 style="font-size:200%">购物车(已通过vue进行重构)
        </h1>
      </div>
      <div class="inter2">
        <div class="inter21">
          <input v-model="checkAll" type="checkbox" class="checkAll"><span class="s1">全选</span>
          <span class="s2">商品名称</span><span class="s3">单价</span>
          <span class="count">数量</span><span class="total">小计</span><span class="del">操作</span>
        </div>
        <div class="inter22">
          <ul>
            <li v-for="(item, index) in commodity" :key="item.id">
              <input
                v-model="item.isChoose"
                type="checkbox"
                class="check"
              ><img :src="item.imgUrl" alt="">
              <span class="s1">{{ item.name }}</span><span class="money">¥</span>
              <span class="price">{{ item.price }}</span><input
                type="button"
                value="-"
                class="sub"
                @click="sub(item, index)"
              >
              <span class="count">{{ item.count }}</span><input type="button" value="+" class="add" @click="add(item)">
              <span class="money1">¥</span><span class="total">{{ item.price * item.count }}</span>
              <span class="del" @click="del(index)">删除</span>
            </li>
          </ul>
        </div>
        <div class="inter23">
          <div class="picture">
            <img src="@/assets/images/购物车.png" alt="">
          </div>
          <p>您的购物车还没有商品，快去挑选心爱的商品吧！</p>
          <a href=""><span>去逛逛</span></a>
        </div>
      </div>
      <div class="inter3">
        <div class="inter31">
          <div class="last" @click="paymentSuccess = true">
            <a>确认结算</a>
          </div>
          <input v-model="checkAll" type="checkbox" class="checkAll"><span
            class="s1"
          >全选</span>
          <span class="ss1" @click="delAll">删除</span><span class="ss2">清除下架商品</span>
          <div class="foot">
            已选<span class="totalCount">{{ totalCount }}</span>件 合计(不含运费) :
            <span class="totalPrice">¥{{ totalPrice }}</span>元<br>
            <span class="ss3">已优惠 : <span class="ss4"> ¥0</span></span>
          </div>
        </div>
      </div>
    </div>
    <paySuccess v-if="paymentSuccess" :storelist="commodity" :totalprice="totalPrice" style="margin:100px" />
    <SideBar />
    <EndBar />

  </div>
</template>

<script>
import paySuccess from '../../components/order/PaySuccess'
import HeaderBar from '../../components/bars/HeaderBar'
import EndBar from '../../components/bars/EndBar'
import SideBar from '../../components/bars/SideBar'

export default {
  components: {
    paySuccess,
    HeaderBar,
    EndBar,
    SideBar
  },
  data() {
    return {
      checkAll: false,
      paymentSuccess: false,
      commodity: [
        {
          id: 1,
          name: '经典系列红色时钟',
          price: 580,
          count: 1,
          imgUrl: require('@/assets/images/s1.png'),
          isChoose: false
        },
        {
          id: 2,
          name: '便携简约清扫扫帚',
          price: 580,
          count: 1,
          imgUrl: require('@/assets/images/s2.png'),
          isChoose: false
        },
        {
          id: 3,
          name: '黑色陶瓷研磨器皿',
          price: 150,
          count: 1,
          imgUrl: require('@/assets/images/s3.png'),
          isChoose: false
        }
      ]
    }
  },
  computed: {
    totalPrice() {
      let temp = 0
      this.commodity.forEach((item) => {
        if (item.isChoose) {
          temp += item.price * item.count
        }
      })
      return temp
    },
    totalCount() {
      let temp = 0
      this.commodity.forEach((item) => {
        if (item.isChoose === true) {
          temp += 1
        }
      })
      return temp
    }
  },
  watch: {
    checkAll(newVal) {
      if (newVal === true) {
        this.commodity.forEach((item) => {
          item.isChoose = true
        })
      } else {
        this.commodity.forEach((item) => {
          item.isChoose = false
        })
      }
    }
  },
  methods: {
    delAll() { this.commodity = [] },
    sub(item, index) {
      if (item.count === 1) {
        this.commodity.splice(index, 1)
      }
      item.count -= 1
    },
    add(item) {
      item.count += 1
    },
    del(index) {
      this.commodity.splice(index, 1)
    }
  }
}
</script>

<style>
@import "../../assets/css/origincss2/青竹0.css";
@import "../../assets/css/origincss2/青竹6.css";
@import "../../assets/css/iconfont/iconfont.css";
@import "../../assets/css/origincss2/购物车.css";
</style>
